<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>

</head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
	<h2>标准登录页面</h2>
	<h3>表单登录</h3>
	<form id="form1" action="/authentication/form" method="post" >
		<table>
			<tr>
				<td>用户名:</td> 
				<td><input type="text" name="username"></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>图形验证码:</td>
				<td>
					<input type="text" name="code">
					<input hidden type="text" name="randomStr" value="200">
					<img src="/code/image/200">
				</td>
			</tr>
			<tr>
				<td colspan='2'><input name="remember-me" type="checkbox" value="true" />记住我</td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" id="login">登录</input></td>
			</tr>
		</table>
	</form>
	
	<h3>短信登录</h3>
	<form action="/authentication/mobile" method="post">
		<table>
			<tr>
				<td>手机号:</td>
				<td><input type="text" name="mobile" value="13012345678"></td>
			</tr>
			<tr>
				<td>短信验证码:</td>
				<td>
					<input type="text" name="smsCode">
					<a href="/code/sms?mobile=13012345678">发送验证码</a>
				</td>
			</tr>
			<tr>
				<td colspan="2"><button type="submit">登录</button></td>
			</tr>
		</table>
	</form>
	<br>
	<h3>社交登录</h3>
	<a href="/qqLogin/callback.do">QQ登录</a>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="/qqLogin/weixin">微信登录</a>


</body>

<script>
$(function () {
    $("#login").click(function () {
        $.ajax({
            timeout: 10000, // 超时时间 10 秒
			type:"post",
            headers: {
                'Authorization':"Basic Z3pjOnNlY3JldA=="
            },
            url: "/authentication/form",
            data: $("#form1").serialize(),
            success: function(data) {
            },
            error: function(err) {
            },
            complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数　
            }
        })
    });
})

</script>

</html>